<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--准备元素及内容-->
    <div class=" box1">天气好冷哦！</div>
    <p id="font"> 天冷记得添衣服</p>
    <div class="box2"> 蒹葭苍苍 <strong>白露为霜</strong>
        所谓伊人 在水一方
    </div>

</body>
 <script>
    const em1 =  document.querySelector('.box1');
    const em2 =  document.querySelector('#font');
    const em3 =  document.querySelector('.box2 ');
    //innerHTML:获取元素中的所有内容，包括空格，标签，换行等
    console.log(em1);
    console.log(em1.innerHTML);
    console.log(em2.innerHTML);
    console.log(em3.innerHTML);
    console.log('-------');
    //innerText：获取元素中的所有文本内容，不包括空格，标签，换行等
    console.log(em1.innerText);
    console.log(em2.innerText);
    console.log(em3.innerText);
    console.log('-------');
    //textContent:：获取元素中的所有文本内容，不包括标签.
    console.log(em1.textContent);
    console.log(em2.textContent);
    console.log(em3.textContent);
    em1.innerHTML = '飞流直下三千尺<br>,疑是银河落九天';
    console.log(em1.innerHTML);
    em2.innerText = '先天下之忧而忧<strong>后天下之乐而乐</strong>';
    console.log(em2.innerText);
    em3.textContent = 'null';
    console.log(em3.textContent);
 </script>
</html>